<script setup lang="tsx">
import { ref } from 'vue'
import Son from './Son.vue'
// 在script标签中生成都是虚拟DOM
// 1. 声明的变量数据, 要在jsx/tsx中渲染 得使用{}渲染
// 2. JSX/TSX中所有的vue指令都不能用 v-if v-for v-on... onClick=处理函数
// 3. JSX/TSX中所有涉及到动态属性绑定的 不能使用: "" 一律都是{}
// 4. 逻辑分支 => 三元运算符 || 想使用if else在函数返回的时候
// 5. 循环==>  map函数
// 6. return 只能有一个根节点
// 7. 注释 { /**  注释 */} 
// 8. 支持子组件挂载抽离
// 这些语法和react类似 
// 1. react铺垫
// 2. 这种方式实现动态的需求结构定制更灵活
let money = ref(100)
const makeMoney = () => {
  money.value++
}
const id = 'box'
let flag = ref(true)
const list = ref([
  { id: 1, content: "吃饭", done: true },
  { id: 2, content: "睡觉", done: false },
  { id: 3, content: "打代码", done: true },
]);
const VNnodeBox = () => {
  if (flag.value) {
    return (<div>
      {
        // 注释1
        /* 注释2 */
      }
      <p>{money.value}</p>
      <button onClick={makeMoney}>+钱</button>
      <h1 id={id}>标题</h1>
      <strong>{flag.value ? '真的' : '假的'}</strong>
      <ul>
        {
          list.value.map(item => {
            return <li key={item.id}>{item.content}</li>
          })
        }
      </ul>
      <Son></Son>
    </div >)
  } else {
    return <em>flag为false展示的结构</em>
  }

}
</script>
<template>
  <VNnodeBox></VNnodeBox>
  <!-- <strong>{{ flag ? '真的' : '假的' }}</strong> -->
</template>
<style scoped>
</style>